<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>作品集</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div id="pagewrap" class="pagewrap">
			<div class="btn">
				<div class="container show" id="page-1">
					<a class="current-demo " style="font-size: 30px;color: #fff;" >
						<b class="animated bounceInDown boun1">黄</b>
						<b class="animated bounceInDown boun2">嘉</b>
						<b class="animated bounceInDown boun3">敏</b><br/>
						<b class="animated bounceInDown boun4">作</b>
						<b class="animated bounceInDown boun5">品</b>
						<b class="animated bounceInDown boun6">集</b>
					</a>
				<p>
					<a class="pageload-link" href="#page-2">点击进入</a>
				</p>
				</div>
			</div>
			<div class="container" id="page-2">
				<section>
					<div class="works">
			<h1>作品集</h1>
			<div class="container" style="display: block !important;">
				<div class="row">
					<div class="col-xs-6 col-md-3 ">
						<a title="维诺卡夫官方商城" target="_blank" href="https://vinocave.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/wrkf.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									维诺卡夫官方商城
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3 ">
						<a title="深圳秀丝内语服装" target="_blank" href="http://378.mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/szxs.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									深圳秀丝内语服装
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="成都拓普集团" target="_blank" href="http://51.mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/tuopu.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									成都拓普集团
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="淳和中医馆" target="_blank" href="http://gzchzyg.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/chunhe.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									淳和中医馆
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="火石部落" target="_blank" href="http://www.gzhuoshi.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/huoshi.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									火石部落
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="DOUBLE" target="_blank" href="http://doublebuilding.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/double.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									DOUBLE
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="迪卡铂" target="_blank" href="http://dechaabintl.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/dkb.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									迪卡铂
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="润士达" target="_blank" href="http://407.mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/runshida.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									润士达
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="链天" target="_blank" href="http://31.mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/liantian.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									链天集团
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="复印机套鼓" target="_blank" href="http://30.Mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/fuyinji.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									复印机套鼓
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="成都兴诺科技有限公司" target="_blank" href="http://33.mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/xingnuo.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									成都兴诺科技有限公司
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="澳洲彩虹" target="_blank" href="http://www.cnfountain.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/ch.png" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									澳洲彩虹
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="小巨蛋" target="_blank" href="http://304.mqu-test.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/xjd.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									小巨蛋
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="达翰激光" target="_blank" href="http://dahanlaser.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/handa.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									达翰激光
								</div>
							</div>
						</a>
					</div>
					<div class="col-xs-6 col-md-3  ">
						<a title="HOOLNN" target="_blank" href="http://www.hoolnn.com/">
							<div class="works_box">
								<div class="img_box">
									<img src="images/jiaju.jpg" />
									<div class="mask"></div>
								</div>
								<div class="tit">
									HOOLNN
								</div>
							</div>
						</a>
					</div>
					
				</div>
			</div>
		</div>
				</section>
            </div>
            <div id="loader" class="pageload-overlay" data-opening="M 40 -21.875 C 11.356078 -21.875 -11.875 1.3560784 -11.875 30 C -11.875 58.643922 11.356078 81.875 40 81.875 C 68.643922 81.875 91.875 58.643922 91.875 30 C 91.875 1.3560784 68.643922 -21.875 40 -21.875 Z">

				<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice">

					<path d="M40,30 c 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 Z"/>

				</svg>

			</div>
		</div>
	</body>
	<script src="js/snap.svg-min.js"></script>
	<script src="js/jquery-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/classie.js"></script>
	<script src="js/svgLoader.js"></script>
	<script>

			(function() {

				var pageWrap = document.getElementById( 'pagewrap' ),

					pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),

					currentPage = 0,

					triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),

					loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 300, easingIn : mina.easeinout } );



				function init() {

					triggerLoading.forEach( function( trigger ) {

						trigger.addEventListener( 'click', function( ev ) {

							ev.preventDefault();

							loader.show();

							// after some time hide loader

							setTimeout( function() {

								loader.hide();



								classie.removeClass( pages[ currentPage ], 'show' );

								// update..

								currentPage = currentPage ? 0 : 1;

								classie.addClass( pages[ currentPage ], 'show' );



							}, 2000 );

						} );

					} );	

				}



				init();

			})();

		</script>

</html>
<style type="text/css">
	.qidongye {
		background: rgba(240, 240, 240, 0.5);
		width: 100%;
		height: 100%;
	}
</style>